<html>
    <head>
        <title>Login to The Bret</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <link type="text/css" rel="stylesheet" href="CSS/Desktop/login.css"/>
        <link rel="stylesheet" href="<?php global $host;
echo $host;
?>/css/Desktop/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="<?php echo $host ?>/css/Desktop/bootstrap-theme.min.css">
        <script src="js/Desktop/jquery-2.1.0.min.js"></script>
        <script src="js/Desktop/md5.js"></script>
        <script src="js/Desktop/soapclient.js"></script>
        <script type="text/javascript">
            var curRequests = [];
            var recaptcha_res = '';
            function validate() {
                if (document.login.username.value !== "" && document.login.password.value !== "") {
                    document.getElementById('error').style.display = 'none';
                    $.post('/bret/ws/login', {
                        'email': document.login.username.value.trim(),
                        'password': hex_md5(document.login.password.value.trim()),
                    }).done(function (data) {
                        var r = JSON.parse(data);
                        if (r === null) {
                            document.getElementById('error').textContent = 'Email and password does not match. Please try again';
                            document.getElementById('error').style.display = 'inherit';
                        } else if (r.email !== "") {
                            if (r.password === '28651b0d8fb8d3153a83c569658c79ee') {
                                window.location.href = '<?php echo $GLOBALS['host']; ?>/home';
                            }
                            else
                                window.location.reload(true);
                        }
                    });
                } else {
                    document.getElementById('error').textContent = 'You can not leave with empty username or password';
                    document.getElementById('error').style.display = 'inherit';
                }
            }
            $(document).on('click', '.get-info a.register', function (e) {
                e.preventDefault();
                $.ajax({
                    url: "/bret/ajax/register",
                    type: "POST",
                    success: function (r) {
                        $('#register-modal').addClass('new-profile');
                        $('#register-modal .modal-title').text('Register');
                        $('#register-modal .modal-body').html(r);
                        $('#register-modal').modal('show');
                    }
                });
            });

            function resetModal(id) {
                $('#' + id).attr('class', 'modal fade');
                setTimeout(function () {
                    $('#' + id + ' .save-btn').removeClass('hide');
                }, 500);
            }

            $(document).on('click', '#register-modal button.close', function () {
                resetModal('register-modal');
            });

            $(document).on('click', '#register-modal button.close-btn', function () {
                resetModal('register-modal');
            });

            $(document).on('click', '#register-modal button.save-btn', function () {
                //validate
                var checkProfile = true;
                var error = '';
                var profile = {};
                var email = $('#c2023_email').val();
                var first_name = $('#c2023_first_name').val();
                var last_name = $('#c2023_last_name').val();
                var password = $('#c2023_password').val();
                var confirm_password = $('#c2023_confirm_password').val();
                var phone = $('#c2023_phone').val();
                if (validateEmail(email)) {
                    profile.email = email;
                } else {
                    checkProfile = false;
                    error += '* Your email is invalid.';
                }
                if (first_name !== '' && last_name !== '') {
                    profile.name = first_name + " " + last_name;
                } else {
                    checkProfile = false;
                    if (error !== '') {
                        error += "<br>* Your name can not empty.";
                    } else {
                        error += "* Your name can not empty.";
                    }
                }
                if (password !== '' && confirm_password !== '' && password === confirm_password) {
                    profile.password = hex_md5(password);
                } else {
                    checkProfile = false;
                    if (error !== '') {
                        error += "<br>* Password is invalid.";
                    } else {
                        error += "* Password is invalid.";
                    }
                }
                var reg = new RegExp('^[0][1-9]{1}[0-9]{8,9}$');
                if (phone !== '' && reg.test(phone)) {
                    profile.phone = phone;
                } else {
                    checkProfile = false;
                    if (error !== '') {
                        error += "<br>* Phone number is wrong.";
                    } else {
                        error += "* Phone number is wrong.";
                    }
                }
                if(recaptcha_res === '') {
                    checkProfile = false;
                    if (error !== '') {
                        error += "<br>* Please type captcha.";
                    } else {
                        error += "* Please type captcha.";
                    }
                }
                profile.company = $('#c2023_company').val();
                profile.address = $('#c2023_address').val();
                if (checkProfile) {
                    $.ajax({
                        url: "/bret/ws/register",
                        type: "POST",
                        data: {profile: JSON.stringify(profile), recaptcha_res: recaptcha_res},
                        success: function (r) {
                            if (r !== 'duplicated') {
                                if (r !== 'false') {
                                    setTimeout(function () {
                                        $('#register-modal .modal-title').text('Successfully');
                                        $('#register-modal .modal-body').html('Please checking your email to finish!');
                                        $('#register-modal .save-btn').addClass('hide');
                                        $('#register-modal').modal('show');
                                    }, 700);
                                }
                            } else {
                                setTimeout(function () {
                                    $('#register-modal .modal-title').text('Warning');
                                    $('#register-modal .modal-body').html('The email is duplicated! Please choose another.');
                                    $('#register-modal .save-btn').addClass('hide');
                                    $('#register-modal').modal('show');
                                }, 700);
                            }
                        }
                    });
                    $('#register-modal button.close-btn').click();
                } else {
                    //show error
                    $('#register-modal .error').html(error);
                }
            });
            function validateEmail(email) {
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            }
            var onloadCallback = function () {
                grecaptcha.render(document.getElementById('recaptcha'), {
                    'sitekey': '6LfpXv4SAAAAAMf_acPRFJskt9SoOqghA0TQPfIL',
                    'callback' : verifyCallback,
                    'theme' : 'light'
                });
            };
            var verifyCallback = function (response) {
                recaptcha_res = response;
            };
        </script>
    </head>
    <body>
        <div class="wrapper">
            <div id="register-modal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer" style="margin-top: 0px;">
                            <button type="button" class="btn btn-default close-btn" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary save-btn">Confirm</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            <div class="buzzpulse-header-bar centered">
                <div class="header content clearfix"></div>
            </div>
            <div class="main content clearfix">
                <div class="card signin-card">
                    <p class="profile-name"></p>
                    <form name="login" action="" method="POST" onsubmit="validate();
                            return false;">
                        <label class="label">Username</label>
                        <input id="id_username" name="username" type="text">
                        <label class="label">Password</label>
                        <input id="id_password" name="password" type="password">
                        <div id="error" style="color: #fff; margin-bottom: 5px; display: none">&nbsp;</div>
                        <input class="rc-button rc-button-submit" type="submit" value="Log in">
                        <input type="checkbox" class="css-checkbox" id="checkbox" checked="checked">
                        <label class="label remember">Remember Me</label>
                    </form>
                </div>
                <div class="get-info">
                    <a class="register" href="#">Register</a><span>|</span>
                    <a class="forgot-password-link" href="#">Lost your password?</a>
                </div>
            </div>
        </div>
        <script src="<?php echo $host ?>/js/Desktop/bootstrap.min.js"></script>
    </body>
</html>

